// less 文件 (移动端通用less文件)
// 作者 Aaron
// 时间 2017/12/14
// 协议 MIT 
// 只考虑webkit内核手机浏览器和火狐内核浏览器
// @charset "utf-8";
// 清除(闭合)浮动：http://www.iyunlu.com/view/css-xhtml/55.html
.clearfix () { 
  *zoom: 1;
  &:before, 
  &:after {
      display: table;
      content: "";
    line-height: 0;
  }
  &:after {
      clear: both;
  }
}
@topBg: #f4f4f4;
@navBg: #f9f9f9;
@normalBg: #fff;
@middle: 1200px;
@w: 100%;
@fs: 14px;
@color:#7f2f8f;
// 居中
.center-block() {
    display: block;
  margin-left: auto;
  margin-right: auto;
}
// 左右浮动
.fl() {
  float: left;
}
.fr() {
  float: right;
}

.inline-block() { 
  /* 如果有必要可在其父元素上应用样式vertical-align:top; */
  display:inline-block; 
  *display:inline; 
  *zoom:1;
} 

// 文字隐藏
.text-hidden() {
  /* 
   * 魔鬼的text-indent-9999px:
   * http://prezi.com/t8yyirefxn2u/text-indent-9999px/ 
   */
  text-indent: 100%;
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden;
}

.text-overflow() {
  // 文字溢出隐藏显示省略号，需要用在与文字最近的一个block|inline-block的祖先元素上(ie6中该元素的width需要显性的声明且不能为auto,100%是可行的) 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 文字(强制)折行
.text-break() {
  word-wrap:break-word;
  word-break:break-all;
}

// (整体)透明
.opacity (@a: 0.3) {
  @aa: (@a*100); 
  opacity: @a;
  filter: ~"Alpha(Opacity=@{aa})"; /* ie5-8 */
  *zoom: 1; /* 应用滤镜的元素必须拥有layout */
}
// 背景透明
.background-rgba(@r: 0, @g: 0, @b: 0, @a: 0.3) {
  @c: rgba(@r, @g, @b, @a);
  @cc: argb(@c);
  background-color:@c;
  filter:~"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='@{cc}',EndColorStr='@{cc}')";
  *zoom: 1;
}

// 圆角
.border-radius(@a: 3px) {
  -webkit-border-radius: @a;
     -moz-border-radius: @a;
          border-radius: @a;
}

// 阴影
.box-shadow( @a: 0 0 10px rgba(0,0,0,.25); ) {
  -webkit-box-shadow: @a;
     -moz-box-shadow: @a;
          box-shadow: @a;
}

// 渐变
.linear-gradient(@a: #ffa600; @b: #fe9200) {
  filter: ~'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="@{a}", endColorstr="@{b}")';
  background-image: -webkit-linear-gradient(to top,@a, @b);
  background-image: -moz-linear-gradient(to top,@a, @b);
  background-image: -ms-linear-gradient(to top,@a  0,@b 100%);
  background-image: -o-linear-gradient(to top,@a, @b);
  background-image: linear-gradient(to top,@a, @b);
}

.box-sizing ( @a: content-box ) {
  -webkit-box-sizing: @a;
     -moz-box-sizing: @a;
          box-sizing: @a;
}

// 利用边框制作小三角
.triangle (@type: bottom, @x: 10px, @c: #999, @y: @x) {

    display: inline-block;
    width:0; height:0; overflow:hidden;
    vertical-align: middle;

    // 这里有意利用IE6对dashed渲染缺陷解决IE6不支持transparent的问题 
    @transparent: @y dashed transparent; 
    // 该特殊边框的大小必须小于其他边框大小的四倍，否则IE6会有问题 
    @special: @x solid @c;
    .border();
    .border () when (@type = bottom) {
    border-bottom: @special;
    border-left: @transparent;
    border-right: @transparent;
    }
    .border () when (@type = top) {
    border-top: @special;
    border-left: @transparent;
    border-right: @transparent;
    }
    .border () when (@type = left) {
    border-left: @special;
    border-top: @transparent;
    border-bottom: @transparent;
    }
    .border () when (@type = right) {
    border-right: @special;
    border-top: @transparent;
    border-bottom: @transparent;
    }
}

// 鼠标经过旋转
.rotate (@d: 180deg, @s: .3s) {
  -webkit-transition: @s ease-in;
  -moz-transition: @s ease-in;
  -o-transition: @s ease-in;
  transition: @s ease-in;

  &:hover, &-hover{
      -webkit-transform: rotate(@d);
      -moz-transform: rotate(@d);
      -ms-transform: rotate(0); 
      -o-transform: rotate(@d);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
      -ms-filter: ~"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
      transform: rotate(@d);
  }
}

// 去色(不兼容低版本Safari、Opera和某些firefox), 一般用于哀悼日)
.grayscale() { 
  -webkit-filter: grayscale(100%);   
  -webkit-filter: grayscale(1);    /* Chrome 19+ & Safari 6+ */
     -moz-filter: grayscale(100%); 
      -ms-filter: grayscale(100%); 
       -o-filter: grayscale(100%); 
          filter: grayscale(100%);

          /* firefox 3.5+，慎用！存在性能问题 */ 
          filter: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale');           
          filter: gray; /* IE6~9 */ 
}
.max-height(@h, @pd: 0) {

  @Hnum: unit(@h);
  @PDnum: unit(@pd);

  max-height: @h;
  _height:~"expression( (this.clientHeight-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";
  _overflow: hidden;
  _zoom: 1;

  /* 
   * clientHeight = height + padding;
   * offsetHeight = height + padding+border;
   */
}
.max-width(@h, @pd: 0) {

  @Hnum: unit(@h);
  @PDnum: unit(@pd);

  max-width: @h;
  _width:~"expression( (this.clientWidth-@{PDnum})>@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";
  _overflow: hidden;
  _zoom: 1;

}
.min-height(@h, @pd: 0) {

  @Hnum: unit(@h);
  @PDnum: unit(@pd);

  min-height: @h;
  _height:~"expression( (this.clientHeight-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientHeight-@{PDnum}) )";
  _overflow: hidden;
  _zoom: 1;

}

// 一个老外的博客中看到的：
.min-height2(@h) {
min-height: @h;
height: auto !important; /*all browsers except ie6 will respect the !important flag*/
height: @h; /*Should have the same value as the min height above*/
}

.min-width(@h, @pd: 0) {

  @Hnum: unit(@h);
  @PDnum: unit(@pd);

  min-width: @h;
  _width:~"expression( (this.clientWidth-@{PDnum})<@{Hnum}? @{Hnum} : (this.clientWidth-@{PDnum}) )";
  _overflow: hidden;
  _zoom: 1;

}

.clip (@t: 0px, @r: 0px, @b: 0px, @l: 0px) {
  position:absolute; clip:rect; /* 矩形剪裁只能作用于 position:absolute|fixed 的元素上 */
  clip: rect(@t @r @b @l); /* IE6, IE7 */
  clip: rect(@t, @r, @b, @l);
}

// 解决Retina屏幕下的图像显示
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
    background-image: url("@{file-1x}");

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {
        background-image: url("@{file-2x}");
        background-size: @width-1x @height-1x;
    }
}

.image-set (@a1, @a2) {    
  /* 
   * 解决Retina屏幕下的图像显示，淘宝首页的css sprite解决方案
   * image-set是CSS4的属性，"safari6"和“chrome21”支持
   * 如果浏览器支持image-set，普通显屏，此时浏览器会选择image-set中的@1x背景图像; Retina屏幕，此时浏览器会选择image-set中的@2x背景图像;
   * 扩展阅读：http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html
   */
  background: url(@a1);
  background-image: -webkit-image-set(url(@a1) 1x, url(@a2) 2x);
  background-image: -moz-image-set(url(@a1) 1x,url(@a2) 2x);
  background-image: -ms-image-set(url(@a1) 1x,url(@a2) 2x);
  background-image: -o-image-set(url(@a1) 1x,url(@a2) 2x);
  background-repeat: no-repeat;
}

.user-select(@select: auto) {
-webkit-user-select: @select;
   -moz-user-select: @select;
    -ms-user-select: @select;
     -o-user-select: @select;
        user-select: @select;
}

// 图片水平垂直居中: http://blog.moocss.com/code-snippets/html-css-code-snippets/1390.html 图片为正方形
.image-center(@w, @h: @w){
  @width: unit(@w);
  @height: unit(@h);
  @_fontsize: (@height * 0.873);

  width: ~'@{width}px';
  height: ~'@{height}px';
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;

  *display: block;//IE hack
  *font: ~"@{_fontsize}px/1em Arial";

  img{
    display: inline;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
  }
}

// CSS3 "栅格化"(flexbox)：http://www.zhihu.com/question/22991944
.display-flex() {
    display: -webkit-box;  /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box;     /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex;    /* Firefox 18+ */
    display: -ms-flexbox;  /* IE 10 */
    display: flex;         /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.box-flex(@a) {
    -webkit-box-flex: @a;
    -webkit-flex: @a;
    -ms-flex: @a;
    flex: @a;
}
// 自定义less 混合函数
//盒子模型 边框计算
.border-box() {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
  }
  
  //圆角
  .border-radius(@radius:2px) {
    -moz-border-radius:@radius;
    -webkit-border-radius:@radius;
    border-radius:@radius;
  }
  
  //变形
  .transform(@all) {
    -moz-transform:@all;
    -webkit-transform:@all;
    transform:@all;
  }
  
  //过渡
  .transition(@all) {
    -moz-transition:@all;
    -webkit-transition:@all;
    transition:@all;
  }
  //常用过渡
  .transiton() {
      -webkit-transition:all .8s ease-in-out;
      -moz-transition:all .8s ease-in-out;
      transition:all .8s ease-in-out;
  } /*可以自定义修改*/
  
  //动画
  .animation(@all) {
    -moz-animation:@all;
    -webkit-animation:@all;
    animation:@all;
  }
  //常用动画
  .animation(@name) {
    -moz-animation:@name 1s 0s 1 ease both;
    -webkit-animation:@name 1s 0s 1 ease both;
    animation:@name 1s 0s 1 ease both;   
  }
  
  //字体特效
  .text-shadow-light(@blur:2px) {
    text-shadow: 0px 0px @blur white;
  }/*可发挥想象定义常用字体特效*/
  
  //盒子阴影
  .box-shadow(@all) {
    -moz-box-shadow:@all;
    -webkit-box-shadow:@all;
    box-shadow: @all;
  }
  //常用盒子阴影
  .box-shadow-light(@blur) {
    -moz-box-shadow:0px 0px @blur white;
    -webkit-box-shadow:0px 0px @blur white;
    box-shadow: 0px 0px @blur white;   
  }
  
  //文字旋转
  .text-rotate(@angle:45deg) {
    -webkit-transform: rotate(@angle);
    -moz-transform: rotate(@angle);
    transform:rotate(@angle);
  }

  //长单词强制换行
  .wrap() {
    text-wrap: wrap;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  //去掉手持设备点击时出现的透明层(一般在头部做格式化)
  .delete-highlight() {
    a,button,input {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent; /* For some Androids */
    }
  }
  
  //去掉苹果浏览器自带input[submit/reset/button]的ui渲染效果
  .delete-appearance() {
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button {
      -webkit-appearance: none;
    }
  }

  // 通过CSS在一个单独的元素中生成列
  .content-columns(@width; @count; @gap) {
    -webkit-column-width: @width;
       -moz-column-width: @width;
            column-width: @width;
    -webkit-column-count: @count;
       -moz-column-count: @count;
            column-count: @count;
    -webkit-column-gap: @gap;
       -moz-column-gap: @gap;
            column-gap: @gap;
  }
  
  // 为表单控件中每个文本域提供占位符（Placeholder）文本的颜色
  .placeholder(@color: @input-color-placeholder) {
    &::-moz-placeholder           { color: @color; } // Firefox
    &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
    &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
  }